*{
    box-sizing: border-box;
}
body {
    background-color: #7bdaf3;
    font-family: sans-serif;
    display: flex;                /* 启用弹性布局 */
    flex-wrap: wrap;              /* 允许换行 */
    margin: 0;                    /* 清除默认外边距 */
    padding-top: 3rem;            /* 顶部内边距避免内容被固定按钮遮挡 */
}

/* 添加按钮样式 */
.add {
    position: fixed;              /* 固定定位 */
    top: 1rem;                   /* 距顶部距离 */
    right: 1rem;                 /* 距右侧距离 */
    background-color: #9ec862;    /* 浅绿色背景 */
    color: #fff;                 /* 白色文字 */
    border: none;                /* 无边框 */
    border-radius: 3px;          /* 圆角 */
    padding: 0.5rem 1rem;        /* 内边距 */
    cursor: pointer;             /* 手型光标 */
}

/* 便利贴容器样式 */
.note {  /* 修正：添加遗漏的类选择符点 */
    background-color: #fff;        /* 白色背景 */
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);  /* 柔和阴影效果 */
    margin: 30px 20px;            /* 外间距：上下30px，左右20px */
    height: 400px;                /* 固定高度 */
    width: 400px;                 /* 固定宽度 */
}

/* 工具按钮容器 */
.note .tools {
    background-color: #9ec862;     /* 与添加按钮同色系 */
    display: flex;                /* 弹性布局 */
    justify-content: flex-end;    /* 按钮右对齐 */
    padding: 0.5rem;              /* 内边距 */
}

/* 便利贴工具按钮样式 */
.note .tools button {  /* 修正：添加类选择符点 */
    background-color: transparent;  /* 透明背景 */
    border: none;                 /* 无边框 */
    color: #fff;                  /* 修正：移除错误的"1"前缀 */
    cursor: pointer;              /* 手型指针 */
    font-size: 1rem;              /* 标准字体大小 */
    margin-left: 0.5rem;          /* 左侧间距 */
}

/* 便利贴文本编辑区样式 */
.note textarea {      /* 修正：添加类选择符点 */
    outline: none;     /* 移除聚焦轮廓线 */
    font-family: inherit;  /* 继承父级字体 */
    font-size: 1.2rem;     /* 稍大字体 */
    border: none;      /* 无边框 */
    height: 400px;     /* 固定高度 */
    width: 100%;       /* 100%父容器宽度 */
    padding: 20px;     /* 内边距 */
}

/* 隐藏元素通用类 */
.hidden {  /* 修正：添加类选择符点 */
    display: none; /* 完全隐藏元素（不占位） */
}